<template>
    <div class="comment-container">
        <div class="filter-container">
            <el-input v-model="listQuery.content" placeholder="评论内容" style="width: 200px;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            <el-input v-model="listQuery.noteTitle" placeholder="关联小记" style="width: 200px;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                搜索
            </el-button>
        </div>

        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column align="center" label="ID" width="95">
                <template slot-scope="scope">
                    {{ scope.row.id }}
                </template>
            </el-table-column>
            <el-table-column label="评论内容" align="center">
                <template slot-scope="scope">
                    <el-popover placement="top-start" width="400" trigger="hover">
                        <div>{{ scope.row.content }}</div>
                        <div slot="reference" class="content-preview">
                            {{ scope.row.content | ellipsis }}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="评论用户" align="center" width="120">
                <template slot-scope="scope">
                    {{ scope.row.userName }}
                </template>
            </el-table-column>
            <el-table-column label="评论时间" align="center" width="180">
                <template slot-scope="scope">
                    {{ scope.row.createTime | parseTime }}
                </template>
            </el-table-column>
            <el-table-column label="关联小记" align="center" width="120">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleViewNote(scope.row.noteId)">
                        {{ scope.row.noteTitle | ellipsis }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
                <template slot-scope="{row}">
                    <el-button size="mini" type="danger" @click="handleDelete(row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils'

export default {
    name: 'Comment',
    components: { Pagination },
    filters: {
        parseTime,
        ellipsis(value) {
            if (!value) return ''
            if (value.length > 20) {
                return value.slice(0, 20) + '...'
            }
            return value
        }
    },
    data() {
        return {
            list: [],
            listLoading: true,
            total: 0,
            listQuery: {
                page: 1,
                limit: 10,
                content: '',
                noteTitle: ''
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async getList() {
            this.listLoading = true
            // TODO: 调用后端API获取评论列表
            // const { data, total } = await getCommentList(this.listQuery)
            // this.list = data
            // this.total = total
            this.list = [
                {
                    id: 1,
                    content: '这是一条测试评论的内容，用于展示评论管理功能。',
                    userName: '测试用户',
                    createTime: '2024-03-20 10:00:00',
                    noteId: 1,
                    noteTitle: '测试小记标题'
                }
            ]
            this.total = 1
            this.listLoading = false
        },
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
        },
        handleViewNote(noteId) {
            // TODO: 跳转到对应小记详情页
            // this.$router.push(`/discovery/note/detail/${noteId}`)
        },
        async handleDelete(row) {
            this.$confirm('确认删除该评论吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // TODO: 调用后端API删除评论
                // await deleteComment(row.id)
                this.$notify({
                    title: '成功',
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                })
                this.getList()
            })
        }
    }
}
</script>

<style scoped>
.comment-container {
    padding: 20px;
}

.filter-container {
    padding-bottom: 10px;
}

.content-preview {
    cursor: pointer;
    color: #409EFF;
}
</style> 